<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--秒杀页面</title>
    <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-jquery.autocomplete.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-seckill-index.css"/>
</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div id="nav-bottom"></div>
<script type="text/javascript">$("#nav-bottom").load("top.html");</script>


<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/jquery.autocomplete.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript" src="js/pages/seckill-index.js"></script>
<script>
    $(function () {
        $("#code").hover(function () {
            $(".erweima").show();
        }, function () {
            $(".erweima").hide();
        });
    })
</script>
</body>

<div class="py-container index">
    <!--banner-->
    <div class="banner">
        <img src="img/_/banner.png" class="img-responsive" alt="">
    </div>

    <!--商品列表-->
    <div class="goods-list" id="seckid">
        <ul class="seckill" id="seckill">
            <li class="seckill-item" v-for="seck in seckillList">
                <div class="pic" @click="toItem(seck.skuId)">
                    <img :src="seck.sku.images" alt=''>
                </div>
                <div class="intro"><span>{{seck.sku.title}}</span></div>
                <div class='price'><b class='sec-price'>￥{{ly.formatPrice(seck.seckPrice)}}</b><b
                        class='ever-price'>￥{{ly.formatPrice( seck.sku.price)}}</b></div>
                <div class='num'>
                    <div>已售{{getnum(seck.enableSeckillNum/seck.totalSeckillNum)}}%</div>
                    <div class='progress'>
                        <div class='sui-progress progress-danger'><span
                                :style='"width: "+getnum(seck.enableSeckillNum/seck.totalSeckillNum)+"%;"'
                                class='bar'></span></div>
                    </div><br>
                    <div>剩余<b class='owned'>{{seck.enableSeckillNum}}</b>件</div>
                </div>
                <a class='sui-btn btn-block btn-buy' href='javascript:void(0)' @click="flashSale(seck)"
                   target='_blank'>立即抢购</a>
            </li>

        </ul>
    </div>
    <div class="cd-top">
        <div class="top">
            <img src="img/_/gotop.png"/>
            <b>TOP</b>
        </div>
        <div class="code" id="code">
            <span><img src="img/_/code.png"/></span>
        </div>
        <div class="erweima">
            <img src="img/_/erweima.jpg" alt="">
            <s></s>
        </div>
    </div>
</div>

<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#seckid",
        data: {
            ly,
            seckillList: [],
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                ly.http.get("/item/queryseckills").then(resp => {
                    this.seckillList = resp.data;
                })
            },
            getnum(val) {
                var value = Math.round(val * 100);
                return 100 - value;
            },
            toItem(val) {
                window.location.href = "/seckill-item.html?skuid=" + val;
            },
            //立即抢购
            flashSale(seck) {
                //验证登录信息
                ly.verifyUser().then(res => {
                    ly.http.post("/cart", {
                        skuId: seck.skuId,
                        num: 1,
                        limitNum: seck.limitNum,
                        price: seck.seckPrice
                    }).then(res => {
                        window.location.href = "http://www.leyou.com/cart.html";
                    })
                }).catch(() => {
                    //未保存登录的.购物车保存在本地localhost中
                    const carts = ly.store.get("carts") || [];
                    const cart = {
                        skuId: seck.skuId,
                        title: seck.sku.title,
                        price: seck.seckPrice,
                        image: seck.sku.images,
                        num: 1,
                        ownSpec: seck.sku.ownSpec,
                        limitNum: seck.limitNum
                    }
                    carts.push(cart);
                    //把cart回写到localstorage
                    ly.store.set("carts", carts);
                    // 跳转
                    window.location.href = "http://www.leyou.com/cart.html?returnUrl=" + location.href;
                })
            }
        }


    })

</script>

</html>